<template>
  <!-- dialog -->
  <el-dialog
    :title="title"
    :visible.sync="dialog_flag"
    center
    :modal="true"
    :modal-append-to-body="false"
    :append-to-body="true"
    :width="width"
    :lock-scroll="false"
    @close="hand_close"
  >
    <slot />
    <div slot="footer" class="dialog-footer">
      <el-button size="small" plain @click="hand_click_false">取 消</el-button>
      <el-button type="success" size="small" @click="hand_click_true">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: 'PlainDialog',
  props: {
    title: String,
    common_dialog: Boolean,
    width: String
  },
  data() {
    return {
      dialog_flag: false
    }
  },
  watch: {
    'common_dialog': function(val) {
      this.dialog_flag = this.common_dialog
    },
    'width': function(val) {
      console.log(val)
    }
  },
  mounted() {

  },
  methods: {
    hand_close() { // 通知父组件 - 遮罩取消
      this.$emit('hand_close', false)
    },
    hand_click_false() { // 通知父组件 - 取消
      this.$emit('hand_click_false', false)
    },
    hand_click_true() { // 通知父组件 - 确定
      this.$emit('hand_click_true', false)
    }
  }
}
</script>

<style lang="scss" scoped="scoped">
::v-deep .el-dialog__header{
  border-bottom: 1px solid $bg-color;
}
.dialog-footer{
  text-align: right;
}

::v-deep .el-dialog{
  display: flex;
  flex-direction: column;
  margin:0 !important;
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  /*height:600px;*/
  max-height:calc(100% - 30px);
  max-width:calc(100% - 30px);
}
::v-deep .el-dialog .el-dialog__body{
  flex:1;
  overflow: auto;
}
</style>
